
<template>
  <div style="flex: 1;">
    <div class="scrollbox">
      <div class="mainBox"
           v-for="(item, index) in foodList"
           :key="index">
        <div class="boxImg">
          <img :src="item.goods_picture"
               alt>
        </div>
        <div class="boxCharacter">
          <h3>{{item.goods_name}}</h3>
          <!-- <p>剩余数量 {{item.inventory}}</p> -->
          <span>￥{{item.price}}</span>
          <count :listitem="item"></count>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import count from '../orderFive/count'
export default {
  data () {
    return {
      count: null,
      showicon: false
    }
  },
  props: ['foodList'],
  components: {
    count
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../static/css/color.styl'
.scrollbox
  clear both
  overflow scroll
  position absolute
  left 3rem
  right 0
  bottom 1.1rem
  top 1.28rem
.mainBox
  float left
  width 5.14rem
  height 3rem
  border-radius 0.15rem
  background-color $color-white
  margin 0 0.25rem 0.2rem 0
  .boxCharacter, .boxImg
    float left
    height 3rem
    border-top-left-radius 0.15rem
    border-bottom-left-radius 0.15rem
  .boxImg
    width 2.67rem
    overflow hidden
    img
      width 100%
      height 100%
  .boxCharacter
    width 2.47rem
    padding 0.3rem 0.1rem
    h3
      font-size 0.28rem
      margin-bottom 1.2rem
      height 0.7rem
      line-height 1.2
    p
      font-size 0.22rem
      color $color-aaa
      margin-bottom 1.2rem
    span
      font-size 0.28rem
      vertical-align -0.06rem
      &:nth-of-type(1)
        color $color-red
        display inline-block
.anticon
  color $color-main
</style>
